<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#selectFloor").focus();
		$("#selectFloor").change(function() { //층 선택
			var floornum = $("#selectFloor option:selected").val(); //선택한 층 값 저장
			//////////////////층 찾는 비동기 시작//////////////////
			$.ajax({
					url : 'changefloor.do',
					data : 'floornum='
							+ floornum, //층을 data로 보냄
					success : function(data) {
						$("#wardp").empty();
						$("#wardp").append(floornum);
						$(".room1").remove();

						for (var i = 0; i < data.floorlist.length; i++) {
							var html = "";
							var row = data.floorlist[i].max_row; //병실에 침대 가로 수 
							var col = data.floorlist[i].max_col; //병실에 침대 세로 수
							var bedNum = 1;

							html += "<div class='room1' id='" + data.floorlist[i].ward_num + "'><b>"
									+ data.floorlist[i].ward_num + "</b>";
							html += "<table class='wardtb' id='tb" + data.floorlist[i].ward_num + "'>";
							for (var j = 0; j < row; j++) { //침대 가로 수 만큼 반복
								html += "<tr class='row' id='tr" + data.floorlist[i].ward_num + "'>";
								for (var k = 0; k < col; k++) { //침대 세로 수 만큼 반복
									html += "<td class='col' id='td" + data.floorlist[i].ward_num + bedNum + "'>";
									html += bedNum + "</td>";
									bedNum++;
								}
								html += "</tr>"
							}
							html += "</table>";
							html += "</div>";
							$("#info").append(html);
						}

						for (var q = 0; q < data.isEmptylist.length; q++) {
							for (var i = 0; i < data.floorlist.length; i++) {
								var row = data.floorlist[i].max_row; //병실에 침대 가로 수 
								var col = data.floorlist[i].max_col; //병실에 침대 세로 수
								var bedNum = 1;

								if (data.isEmptylist[q].ward_Num == data.floorlist[i].ward_num) {
									for (var j = 0; j < row; j++) { //침대 가로 수 만큼 반복
										for (var k = 0; k < col; k++) { //침대 세로 수 만큼 반복
											if (data.isEmptylist[q].bed_Num == bedNum) {
												$("#td" + data.isEmptylist[q].ward_Num+ data.isEmptylist[q].bed_Num)
												.css("background-color","#AAAAAA");
											}
											bedNum++;
										}
									}
								}
							}
						}
					},
					error : function(data) {
						$(".wardp").empty();
						$(".room1").empty();
						alert("층을 선택해주세요");
					}
				});
			});

			$(document).on("click",".col",function() {
					var bedNum = $(this).text();
					var wardNum = $(this).parent()
							.attr("id").substring(2);

					$.ajax({
						url : 'wardPatientInfo.do',
						data : 'wardNum='+ wardNum + '&bedNum=' + bedNum,
						success : function(data) {
							var html = "";
							$("#info_table").empty();
								for (var i = 0; i < data.wardPatient.length; i++) {
									html += "<tr><td>층수</td><td>"
											+ data.wardPatient[i].floor
											+ "층</td></tr>";
									html += "<tr><td>병실번호</td><td>"
											+ data.wardPatient[i].ward_Num
											+ "</td></tr>";
									html += "<tr><td>침대번호</td><td>"
											+ data.wardPatient[i].bed_Num
											+ "</td></tr>";
									html += "<tr><td>환자이름</td><td>"
											+ data.wardPatient[i].name
											+ "</td></tr>";
									html += "<tr><td>환자번호</td><td>"
											+ data.wardPatient[i].patient_id
											+ "</td></tr>";
								}
									$("#info_table").append(html);
									if (data.wardPatient.length == 0) {
										alert("입원한 환자가 없습니다");
									}
								},
							});
						});
					});
</script>

<div id="systembase">
	<div id="info">
		<h1>
			<b id="wardp" class="wardp"></b>층 입원실
		</h1>
	</div>
</div>
<div id="systembaseside">
	<div class="select">
		<select id="selectFloor">
			<option selected>--층 선택--</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
		</select>
	</div>

	<div class="bed_info">
		<table class="info_table" id="info_table">
		</table>
	</div>
	
</div>
